<template>
	<view class="j-a-add">
		<view class="j-a-a-form">
			<view class="j-a-a-f-info">
				<view class="j-a-a-f-row">
					<view class="j-a-a-f-title">收货人</view>
					<view class="j-a-a-f-value"><u-input type="text" v-model="params.realName" :focus="true"
							placeholder="请输入收货人姓名" :clearable="true" /></view>
				</view>
				<view class="j-a-a-f-row">
					<view class="j-a-a-f-title">手机号码</view>
					<view class="j-a-a-f-value"><u-input type="number" v-model="params.mobile" maxlength="11"
							placeholder="请输入手机号码" :clearable="true" /></view>
				</view>
				<view class="j-a-a-f-row" @click="showRegion">
					<view class="j-a-a-f-title">所在地区</view>
					<view class="j-a-a-f-value">
						<u-input type="text" v-model="params.regionName" placeholder="请选择地区" disabledColor="#ffffff"
							:disabled="true" @click="showRegion" />
					</view>
					<view class="hxf hxf-youbian"></view>
				</view>
				<view class="j-a-a-f-row">
					<view class="j-a-a-f-title">详细地址</view>
					<view class="j-a-a-f-value"><u-input type="text" v-model="params.address" placeholder="小区门牌等详细地址和"
							:clearable="true" /></view>
				</view>
			</view>
			<view class="j-a-a-f-info j-a-a-m" @click="setDefault">
				<view class="j-a-a-f-i-d">设为默认地址</view>
				<view class="j-a-a-f-i-s">
					<u-radio-group v-model="params.isDefault"><u-radio shape="circle" name="1"
							active-color="#FEA602"></u-radio></u-radio-group>
				</view>
			</view>
		</view>
		<view class="shdz" @click="postAddUserAddress" v-if="isAdd">
			添加地址

		</view>
		<view class="shdz" @click="postEditUserAddress" v-if="!isAdd">
			保存地址

		</view>
		<!-- 地区选择器 -->
		<u-picker :show="isShowRegion" mode="region" :default-region="params.regionValue"
			@confirm="confirmRegion"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowRegion: false,
				params: {
					realName: '',
					mobile: '',
					regionName: '',
					regionId: '',
					regionValue: [],
					address: '',
					isDefault: '0',
					userAddressId: ''
				},
				isAdd: true,
			};
		},
		onLoad(e) {
			this.isAdd = JSON.parse(e.addressInfo).isAdd
			if (!this.isAdd && e.addressInfo) {
				this.params.realName = JSON.parse(e.addressInfo).realName;
				this.params.mobile = JSON.parse(e.addressInfo).mobile;
				this.params.regionId = JSON.parse(e.addressInfo).regionId;
				this.params.address = JSON.parse(e.addressInfo).address;
				this.params.isDefault = JSON.parse(e.addressInfo).isDefault;
				this.params.userAddressId = JSON.parse(e.addressInfo).userAddressId;
				this.params.regionName = JSON.parse(e.addressInfo).provinceName + JSON.parse(e.addressInfo).cityName + JSON
					.parse(e.addressInfo).areaName;
			}
		},
		onNavigationBarButtonTap() {
			// 判断有没有用户地址id来决定走哪个接口
			if (this.params.userAddressId) {
				// 编辑地址
				this.postEditUserAddress();
			} else {
				// 添加地址
				this.postAddUserAddress();
			}
		},
		methods: {
			// 添加收货地址
			postAddUserAddress() {

				// 判断收货人姓名是否为空
				if (this.$u.test.isEmpty(this.params.realName)) {
					this.$refs.uToast.show({
						title: '收货人姓名不能为空'
					})
					return false;
				}

				// 判断手机号是否为空
				if (this.$u.test.isEmpty(this.params.mobile)) {
					this.$refs.uToast.show({
						title: '收货人手机号不能为空'
					})
					return false;
				}

				// 判断地区是否为空
				if (this.$u.test.isEmpty(this.params.regionName)) {
					this.$refs.uToast.show({
						title: '收货人地区不能为空'
					})
					return false;
				}

				// 判断详细地址是否为空
				if (this.$u.test.isEmpty(this.params.address)) {
					this.$refs.uToast.show({
						title: '收货人详细地址不能为空'
					})
					return false;
				}
				this.$u.api['address/postAddUserAddress'](this.params)
					.then(res => {
						this.$refs.uToast.show({
							title: '添加地址成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 编辑收货地址
			postEditUserAddress() {
				this.$u.api['address/postEditUserAddress'](this.params)
					.then(res => {
						this.$refs.uToast.show({
							title: '编辑地址成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 显示地区选择器
			showRegion() {
				this.isShowRegion = true;
			},
			// 选中地区
			confirmRegion(e) {
				this.params.regionId = e.area.value;
				this.params.regionName = e.province.label + e.city.label + e.area.label;
			},
			// 设置默认地址
			setDefault() {
				if (this.params.isDefault == 1) {
					this.params.isDefault = 0;
				} else {
					this.params.isDefault = 1;
				}
			}
		}
	};
</script>

<style>
	page {
		background-color: #f3f3f3;
	}
</style>
<style scoped lang="scss">
	.shdz {
		width: 30vw;
		height: 5vh;
		position: fixed;
		bottom: 20vh;
		text-align: center;
		background: #003B40;
		color: #fff;
		left: 35vw;
		line-height: 5vh;
		border-radius: 30px;
	}

	.j-a-add {
		.j-a-a-form {
			padding: 20rpx 25rpx;

			.j-a-a-m {
				margin-top: 20rpx;
				padding: 30rpx 25rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.j-a-a-f-info {
				border-radius: 14rpx;
				background-color: #ffffff;

				.j-a-a-f-row {
					padding: 18rpx 25rpx;
					border-bottom: 1px solid #f1f1f1;
					display: flex;
					align-items: center;

					.j-a-a-f-title {
						width: 130rpx;
					}

					.j-a-a-f-value {
						flex: 1;
					}

					.hxf-youbian {
						color: #7c7c7c;
						padding-top: 5;
						font-size: 40rpx;
					}
				}
			}
		}
	}
</style>